import type { Meta, StoryObj } from "@storybook/react";

import { VideoDemo as _VideoDemo } from "./index";

// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
const meta = {
  title: "H5/视频控件",
  component: _VideoDemo,
  parameters: {
    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
    layout: "centered",
    docs: {
      description: {
        component: "调研h5视频控件的api",
      },
    },
  },
  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
  tags: ["autodocs"],
  // More on argTypes: https://storybook.js.org/docs/api/argtypes
  argTypes: {
    autoPlay: {
      description:
        "一个布尔属性；声明该属性后，视频会尽快自动开始播放，不会停下来等待数据全部加载完成。<br>无法使用 autoplay='false' 来关闭视频的自动播放功能；只要 \\<video\\> 标签中有这个属性，视频就会自动播放。<br>要移除自动播放，需要完全删除该属性。<br>在某些浏览器（例如 Chrome 70.0）中，如果没有设置 muted 属性，autoplay 将不会生效。",
    },
    controls: {
      description:
        "如果存在该属性，浏览器会在视频底部提供一个控制面板，允许用户控制视频的播放，包括音量、拖动进度、暂停或恢复播放。",
    },
    controlsList: {
      description:
        "当浏览器显示视频底部的播放控制面板（例如，指定了 controls 属性）时，controlslist 属性会帮助浏览器选择在控制面板上显示哪些 video 元素控件。<br>允许的值有 nodownload、nofullscreen 和 noremoteplayback。<br>如果要禁用画中画模式（和控件），请使用 disablepictureinpicture 属性。",
    },
    disablePictureInPicture: {
      description:
        "防止浏览器显示画中画上下文菜单或在某些情况下自动请求画中画模式。",
    },
    disableRemotePlayback: {
      description:
        '一个布尔属性，用于在使用有线（HDMI、DVI 等）和无线技术（Miracast、Chromecast、DLNA、AirPlay 等）连接设备时，禁用远程播放功能。<br>在 Safari 中，你可以使用 x-webkit-airplay="deny" 作为兜底方案。',
    },
    loop: {
      description:
        "一个布尔属性；指定后会在视频播放结束的时候，自动返回视频开始的地方，继续播放。",
    },
    muted: {
      description:
        "一个布尔属性，指明在视频中音频的默认设置。设置后，音频会初始化为静音。默认值是 false, 意味着视频播放的时候音频也会播放。",
    },
    playsInline: {
      description:
        "一个布尔属性，指明视频将内嵌（inline）播放，即在元素的播放区域内。请注意，没有此属性并不意味着视频始终是全屏播放的。",
    },
    poster: {
      description:
        "海报帧图片 URL，用于在视频处于下载中的状态时显示。如果未指定该属性，则在视频第一帧可用之前不会显示任何内容，然后将视频的第一帧会作为海报（poster）帧来显示。",
    },
    preload: {
      description:
        "该枚举属性旨在提示浏览器，作者认为在播放视频之前，加载哪些内容会达到最佳的用户体验。可能是下列值之一：<br>none: 表示不应该预加载视频。<br>metadata: 表示仅预先获取视频的元数据（例如长度）。<br>auto: 表示可以下载整个视频文件，即使用户不希望使用它。<br>空字符串: 与 auto 值一致。<br>每个浏览器的默认值都不相同，即使规范建议设置为 metadata。",
    },
    currentTime: {
      description: "控制视频当前时间",
    },
  },
  // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
  args: {},
} satisfies Meta<typeof _VideoDemo>;

export default meta;
type Story = StoryObj<typeof meta>;

// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
export const VideoDemo: Story = {
  args: {},
};
